<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影刀退款</title>
    <link rel="stylesheet" href="/CSS/影刀退款管理/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .clear::after {
            content: "";
            display: block;
            clear: both;
        }

        a {
            text-decoration: none;
        }

        .yingdao {
            display: flex;
        }

        /* 左边部分 */
        .left-section {
            flex-basis: 20%;
            height: 500px;
            justify-content: space-around;
            background-color: rgb(14, 14, 63);
        }

        .left-section .icon-robot-3-line {
            margin-left: 10px;
        }

        .left-section .yingdao-market {
            color: white;
            font-size: 10px;
            font-weight: bold;
            line-height: 30px;
            margin-left: 5px;
        }

        .left-section .work-table a {
            color: grey;
            font-size: 8px;
            margin-left: 10px;
            line-height: 25px;
        }

        .left-section .sub-menu {
            height: 122px;
            font-size: 8px;
            background-color: rgb(4, 4, 38);
        }

        .sub-menu .sub-menu-text {
            padding-left: 23px;
            line-height: 24px;
        }

        .sub-menu a {
            color: grey;
        }

        .sub-menu .active {
            background-color: rgb(232, 66, 66);
        }

        /* 右边部分 */
        .right-section {
            flex-basis: 80%;
        }

        .header-nav {
            display: flex;
            justify-content: space-between;
        }

        .header-nav .icon-fenlei {
            flex-basis: 85%;
            margin-left: 10px;
        }

        .right-nav {
            flex-basis: 15%;
            display: flex;
            justify-content: space-around;
        }

        .header-nav .right-nav .admin {
            font-size: 10px;
            color: grey;
            line-height: 30px;
        }

        .iconfont {
            color: grey;
            font-size: 12px;
            line-height: 30px;
        }

        .icon-robot-3-line {
            color: rgb(213, 37, 37);
        }

        .right-section .home-manage {
            margin-left: 10px;
            margin-top: 5px;
            font-size: 8px;
            color: grey;
        }

        .right-section .refund-manage {
            padding: 10px;
        }

        .order-id {
            width: 100%;
        }

        .order-id p {
            font-size: 8px;
            margin-top: 20px;
            margin-left: 20px;
        }

        .order-id input {
            height: 18px;
        }

        .order-id .id {
            margin-top: 17px;
            font-size: 8px;
            text-indent: 5px;
            color: lightgrey;
            border: 0.1px solid lightgrey;
            border-radius: 2px;
        }

        .order-id .search {
            width: 35px;
            margin-top: 17px;
            font-size: 8px;
            background-color: red;
            color: white;
            border: 0.1px solid lightgrey;
            border-radius: 2px;
        }

        .order-extract .extract {
            height: 18px;
            width: 35px;
            margin-right: 20px;
            margin-bottom: 5px;
            font-size: 8px;
            background-color: red;
            color: white;
            text-align: center;
            border: 0.1px solid lightgrey;
            border-radius: 2px;
        }

        .order-nav {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        .order-nav .baobei {
            flex-basis: 20%;
            margin-left: 30px;
            text-align: center;
        }

        .order-nav .other-nav {
            flex-basis: 80%;
            display: flex;
            justify-content: space-around;
        }

        .order-nav p {
            font-size: 8px;
            color: grey;
        }

        .refund-nav {
            width: 90%;
            height: 15px;
            line-height: 15px;
            margin: 0 auto;
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 3px;
            background-color: lightblue;
            font-size: 6px;
            color: grey;
        }

        .refund-nav .gap{
            margin-right: 10px;
        }

        .refund-nav input {
            width: 25px;
            height: 12px;
            margin: 1.5px;
            margin-left: 20px;
            margin-right: 20px;
            color: #8dadf8;
            font-size: 6px;
            border: 0.5px solid #8dadf8;
            border-radius: 3px;
        }

        .goods {
            margin-left: 20px;
            margin-right: 20px;
            display: flex;
        }

        .goods .left-content{
            flex-basis: 25%;
            display: flex;
            margin-right: 15px;
        }

        .goods img {
            width: 40px;
            height: 40px;
            border-radius: 3px;
        }

        .goods .right-content{
            flex-basis: 75%;
            display: flex;
            margin-top: 15px;
            justify-content: space-around;
        }

        .goods .right-content p{
            flex-basis: 16.6%;
            text-align: center;

        }
        .goods p {
            font-size: 6px;
            color: grey;
        }

        .goods .blue-text{
            color: #4b9cf8;
        }

        .goods .many-text .blue-text{
            margin-bottom: 3px;
        }
    </style>
</head>

<body>
    <div class="yingdao">
        <div class="left-section">
            <div class="clear">
                <p class="left iconfont icon-robot-3-line"></p>
                <p class="left yingdao-market">影刀商城</p>
            </div>
            <p class="work-table"><a href="">工作台</a></p>
            <div class="sub-menu">
                <p class="sub-menu-text"><a href="">影刀魔方</a></p>
                <p class="sub-menu-text"><a href="">影刀参谋</a></p>
                <p class="sub-menu-text"><a href="">影刀物流拦截</a></p>
                <p class="active sub-menu-text"><a href="">退款管理</a></p>
                <p class="sub-menu-text"><a href="">小红薯</a></p>
            </div>
            <p class="work-table"><a href="">订单管理</a></p>
            <p class="work-table"><a href="">网页操作</a></p>
            <p class="work-table"><a href="">元素编辑</a></p>
            <p class="work-table"><a href="">数据录入</a></p>
            <p class="work-table"><a href="">影刀FUG叉岛</a></p>
        </div>
        <div class="right-section">
            <div class="header-nav">
                <p class="iconfont icon-fenlei"></p>
                <div class="right-nav">
                    <p class="iconfont icon-robot-3-line"></p>
                    <p class="admin">admin</p>
                    <p class="iconfont icon-diqiu"></p>
                </div>
            </div>
            <p class="home-manage">主页 / 工作台 / 退款管理</p>
            <h6 class="refund-manage">退款管理</h6>
            <div class="clear order-id">
                <p class="left">订单编号：</p>
                <input class="left id" type="text" value="订单编号">
                <input class="left search" type="submit" value="查询">
            </div>
            <div class="clear order-extract">
                <input class="right extract" type="text" value="导出">
            </div>
            <div class="order-nav">
                <div class="baobei">
                    <p>宝贝</p>
                </div>
                <div class="other-nav">
                    <p>交易金额</p>
                    <p>退款金额</p>
                    <p>申请时间</p>
                    <p>原因</p>
                    <p>发货物流</p>
                    <p>退货物流</p>
                    <p>退货状态</p>
                </div>
            </div>
            <div class=" clear refund-nav">
                <input class="left refund-button" type="submit" value="仅退款">
                <p class="left gap">退款编号: 218566634243402135</p>
                <p class="left gap">订单号: 3169733890320998156</p>
                <p class="left gap">商品编号: 5051228382490</p>
            </div>
            <div class="goods">
                <div class="left-content">
                    <img src="/CSS/影刀退款管理/img/coat.png" alt="">

                    <div class="many-text">
                        <p class="blue-text">【金秋好礼】影刀秋季款纪念外套限时活动特卖</p>
                        <p>颜色分类: 黑色连帽外套中厚加薄绒</p>
                    </div>
                </div>
                <div class="right-content">
                    <p>￥68.00</p>
                    <p>￥68.00</p>
                    <p>2023/07/11 09:23:44</p>
                    <p>拍错/多拍/不喜欢</p>
                    <p>已发货</p>
                    <p>-</p>
                    <p class="blue-text">退款待处理</p>
                </div>
            </div>
            <div class=" clear refund-nav">
                <input class="left refund-button" type="submit" value="仅退款">
                <p class="left gap">退款编号: 218566634243402135</p>
                <p class="left gap">订单号: 3169733890320998156</p>
                <p class="left gap">商品编号: 5051228382490</p>
            </div>
            <div class="goods">
                <div class="left-content">
                    <img src="/CSS/影刀退款管理/img/fanbubao.png" alt="">

                    <div class="many-text">
                        <p class="blue-text">【感恩回馈价】影刀精品帆布包白色品质耐用</p>
                        <p>颜色分类: 白色帆布包大容量卡通</p>
                    </div>
                </div>
                <div class="right-content">
                    <p>￥19.80</p>
                    <p>￥19.80</p>
                    <p>2023/07/11 09:23:44</p>
                    <p>我不想要了</p>
                    <p>未发货</p>
                    <p>-</p>
                    <p class="blue-text">退款待处理</p>
                </div>
            </div>
            <div class=" clear refund-nav">
                <input class="left refund-button" type="submit" value="仅退款">
                <p class="left gap">退款编号: 218566634243402135</p>
                <p class="left gap">订单号: 3169733890320998156</p>
                <p class="left gap">商品编号: 5051228382490</p>
            </div>
            <div class="goods">
                <div class="left-content">
                    <img src="/CSS/影刀退款管理/img/whiteT.jpg" alt="">
                    <div class="many-text">
                        <p class="blue-text">【惊喜价】影刀纪念T恤白色简约纯棉百搭</p>
                        <p>颜色分类: 白色简约夏季爆款</p>
                    </div>
                </div>
                <div class="right-content">
                    <p>￥29.90</p>
                    <p>￥29.90</p>
                    <p>2023/07/11 09:23:44</p>
                    <p>与商家协商一致退款</p>
                    <p>已发货</p>
                    <p>-</p>
                    <p class="blue-text">退款待处理</p>
                </div>
            </div>
            <div class=" clear refund-nav">
                <input class="left refund-button" type="submit" value="仅退款">
                <p class="left gap">退款编号: 218566634243402135</p>
                <p class="left gap">订单号: 3169733890320998156</p>
                <p class="left gap">商品编号: 5051228382490</p>
            </div>
            <div class="goods">
                <div class="left-content">
                    <img src="/CSS/影刀退款管理/img/shoujike.jpg" alt="">
                    <div class="many-text">
                        <p class="blue-text">【春节特惠】恭贺新春手机壳型号全面支持定制</p>
                        <p>颜色分类: 新春红包款支持型号定制</p>
                    </div>
                </div>
                <div class="right-content">
                    <p>￥2.99</p>
                    <p>￥2.99</p>
                    <p>2023/07/11 09:23:44</p>
                    <p>未按约定时间发货</p>
                    <p>未发货</p>
                    <p>-</p>
                    <p class="blue-text">退款待处理</p>
                </div>
            </div>
            <div class=" clear refund-nav">
                <input class="left refund-button" type="submit" value="仅退款">
                <p class="left gap">退款编号: 218566634243402135</p>
                <p class="left gap">订单号: 3169733890320998156</p>
                <p class="left gap">商品编号: 5051228382490</p>
            </div>
            <div class="goods">
                <div class="left-content">
                    <img src="/CSS/影刀退款管理/img/blackT.jpg" alt="">
                    <div class="many-text">
                        <p class="blue-text">【惊喜价】影刀纪念T恤黑色简约纯棉百搭</p>
                        <p>颜色分类: 黑色简约夏季爆款</p>
                    </div>
                </div>
                <div class="right-content">
                    <p>￥29.90</p>
                    <p>￥29.90</p>
                    <p>2023/07/11 09:23:44</p>
                    <p>订单信息拍错（规格/尺码/颜色等）</p>
                    <p>已发货</p>
                    <p>-</p>
                    <p class="blue-text">退款待处理</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>